<template>
	<view class="create">
		<view class="formsBox">
			<uni-forms ref="form" :modelValue="formData" :label-width="100" :rules="rules">
				<uni-forms-item label="申请人" name="applicant">
					<uni-easyinput type="text" v-model="formData.applicant" placeholder="请输入姓名" disabled />
				</uni-forms-item>
				<uni-forms-item label="申领部门" name="deptId">
					<deptSelect v-model="formData.deptId" :disabled="!!processId" />
				</uni-forms-item>
				<uni-forms-item label="领用时间" name="collectionTime">
					<uni-datetime-picker :disabled="!!processId" type="datetime" v-model="formData.collectionTime" return-type="timestamp" placeholder="请选择领用时间" />
				</uni-forms-item>
				<uni-forms-item label="申请物品" name="goodsId">
					<uni-data-select
					    v-model="formData.goodsId"
					    :localdata="goodsList"
						placeholder="请选择申请物品"
						@change="goodsChange"
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="剩余数量" v-if="!processId">
					<uni-easyinput type="text" v-model="selectGoods.remainingInventory" placeholder="" disabled />
				</uni-forms-item>
				<uni-forms-item label="申请数量" name="num">
					<uni-easyinput :disabled="!!processId" type="text" v-model="formData.num" placeholder="请输入申请数量" />
				</uni-forms-item>
				<uni-forms-item label="申领原因" name="reason">
					<uni-easyinput :disabled="!!processId" type="textarea" autoHeight v-model="formData.reason" placeholder="请输入申领原因"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="相关文件" name="files">
					<uploadFile v-model="formData.files" :disabled="!!processId" />
				</uni-forms-item>
				<u-divider text="分割线"></u-divider>
				<view class="">出库详情</view>
				<view class="" v-for="(items, index) in formData.inventoryDetails" :key="index">
					<view class="itemBox">
						<uni-forms-item label="选择库存" :name="['inventoryDetails',index,'outGoodsId']" :rules="[{'required': true,errorMessage: '请选择库存'}]">
							<view class="itemlineBox">{{items.outGoodsName}}</view>
						</uni-forms-item>
						<uni-forms-item label="剩余数量" :name="['inventoryDetails',index,'outRemainingNum']">
							<view class="itemlineBox">{{items.outRemainingNum}}</view>
						</uni-forms-item>
						<uni-forms-item label="出库数量" :name="['inventoryDetails',index,'outNum']" :rules="[{'required': true,errorMessage: '请输入出库数量'}]">
							<uni-easyinput disabled type="number" v-model="items.outNum" placeholder="请输入出库数量" />
						</uni-forms-item>
					</view>
				</view>
			</uni-forms>
		</view>
		<view class="buttonBox" v-if="!processId">
			<button class="button" @click="submit" type="primary">提交</button>
		</view>
	</view>
</template>

<script>
	import uploadFile from '@/components/common/uploadFile.vue'
	// import {getStockInfoSimple,createOaInventory} from '@/api/oa/inventory/index.js'
	import {getColumnInfoSimple,createOaPublicityColumn} from '@/api/oa/column/index.js'
	import deptSelect from '@/components/user/deptSelect.vue'
	import {httpStrToArr} from '@/utils/common.js'
	export default {
		components:{
			uploadFile,
			deptSelect
		},
		props:{
			processId:'',
			propFromData:{}
		},
		watch:{
			propFromData(val){
				let formData = JSON.parse(JSON.stringify(val));
				formData.deptId = {
					name:formData.deptName,
					id:formData.deptId
				};
				formData.files = httpStrToArr(formData.files);
				formData.inventoryDetails = JSON.parse(formData.inventoryDetails);
				this.formData = formData;
				console.log(this.formData)
			},
		},
		data() {
			return {
				formData:{
					applicant:this.$store.state.user.name,
					deptId:'',
					collectionTime:'',
					goodsId:{},
					remainingInventory:'',
					num:'',
					reason:'',
					files:[]
				},
				rules: {
					applicant: {
						rules: [{
							required: true,
							errorMessage: '请输入请假申请人',
						}]
					},
					deptId:{
						rules: [{
							required: true,
							errorMessage: '请选择申领部门',
						}]
					},
					collectionTime: {
						rules: [{
							required: true,
							errorMessage: '请选择领用时间',
						}]
					},
					goodsId: {
						rules: [{
							required: true,
							errorMessage: '请选择申请物品',
						}]
					},
					num: {
						rules: [{
							required: true,
							errorMessage: '请输入申请数量',
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '请输入申领原因',
						}]
					},
				},
				
				// 物品列表
				goodsList:[],
				// 选中的物品
				selectGoods:{},
			};
		},
		methods:{
			// 点击提交
			submit(){
				uni.showLoading()
				this.$refs.form.validate().then(async res => {
					try{
						let formData = JSON.parse(JSON.stringify(this.formData));
						console.log(formData)
						formData.deptName = formData.deptId.name;
						formData.deptId = formData.deptId.id;
						let info = await createOaPublicityColumn(formData);
						console.log(info)
						uni.hideLoading()
						uni.showToast({
							title:'发起成功',
							icon:'none',
							success: () => {
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/process/column/index'
									})
								},1500)
							}
						})
					}catch(err){
						console.log(err)
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log('表单错误信息：', err);
				})
			},
			
			// 点击新增加班块
			clickAdd(){
				let obj = {
					startTime:'',
					endTime:'',
					isHoliday:'',
					overTimeNum:'',
				};
				this.formData.timeJson.push(obj)
			},
			// 点击删除加班块
			clickdel(index){
				this.formData.timeJson.splice(index,1)
			},
			// 加班小时数改变
			overTimeNumInput(){
				setTimeout(()=>{
					let number = 0;
					this.formData.timeJson.forEach(item=>{
						console.log(item)
						console.log(item.overTimeNum)
						number = number + Number(item.overTimeNum)
					});
					this.formData.day = number
				})
			},
			// 选择物品
			goodsChange(val){
				let selectGoods = this.goodsList.find(item=>{
					return item.value == val
				});
				setTimeout(()=>{
					this.selectGoods = selectGoods;
				})
			},
		},
		async onShow() {
			let list = await getColumnInfoSimple();
			this.goodsList = list.data.map(item=>{
				return {
					text:item.columnName,
					value:item.id,
					remainingInventory:item.remainingInventory
				}
			});
		},
		async mounted() {
			let list = await getColumnInfoSimple();
			this.goodsList = list.data.map(item=>{
				return {
					text:item.columnName,
					value:item.id,
					remainingInventory:item.remainingInventory
				}
			});
		}
	}
</script>

<style lang="less" scoped>
.create{
	width: 100%;
	height: auto;
	padding-top: 20rpx;
	.formsBox{
		width: 100%;
		height: auto;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		.uni-forms-item{
			margin-bottom: 30rpx;
		}
		.itemBox{
			.btnBoxs{
				display: flex;
				align-items: center;
			}
		}
	}
	.buttonBox{
		width: 100%;
		height: auto;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
	}
	.itemlineBox{
		height: 100%;
		display: flex;
		align-items: center;
	}
}
</style>
